<script setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  onUnmounted,
  watch,
  getCurrentInstance,
  computed,
} from "vue";
import request from "@/common/utils/request";
import {
  SendOutlined,
  RedoOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

import { templateListLength } from "@/views/shotstack/MuseMixedCut/utools/index.js";

import ImportVideogroupData from "./Component/ImportVideogroupData.vue";
import { nanoid } from "nanoid";
// 文案库
import CopyLibraryModal from "@/components/AddTextModal/CopyLibraryModal.vue";

// 导入关键词组件
import ImportKeyWords from "./Component/keyWordsImport.vue";

import utils from '@/common/utils/utils'
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref(null)
const vipVisible = ref(false)

const props = defineProps({
  // 素材库
  isQuanJU: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  // 是否是脚本
  isScript: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const emit = defineEmits(["updateAiData:data", "emitArr:data"]);

const state = reactive({
  formItems: [],
  showIndex: "",
  step: 0, // 进度条
  industryList: [], // 行业类型
  splitShotTextList: [], // 生成类型 - 分镜头或全局文本
  options: [], // 文案风格
  // 文案条数选项
  copyCount: [...Array(props.isScript ? 8 : 5)].map((_, i) => {
    return props.isScript
      ? {
          value: i + 3,
          label: `${i + 3}组标题`,
        }
      : {
          value: i + 1,
          label: `${i + 1}组标题`,
        };
  }),
  // 镜头组数量选项
  templateOptions: [...Array(5)].map((_, i) => {
    return {
      value: i + 1,
      label: `${i + 1}个镜头`,
    };
  }),
  // 生成字数选择
  limit_typeList: [],
  // 生成标题列表
  titleList: [],

  // 选择标题加载中
  spinning: false,
  // 打开抽屉的初始化数据
  // 初始化数据
  initData: null,
  // 标题分页器
  current: 1,
  // 完成步骤的文本
  stepThree: {
    title: "",
    btn_text: "",
    loading: false,
  },
  languagesList:[]
});

let formState = reactive({
  // sellingpoints: '', // 卖点
  script_type: "", // 文案风格
  num: props.isScript ? 3 : 1, // 生成条数
  shooting_script_num: 1, // 镜头组数量
  titleList: [], // 选择的标题
  industry: "", // 选择的行业类型
  type: "", // 选择的生成模式 - 分镜头或全局文本
  creteTitleType: "b", // 标题生成方式
  limit_type: "", // 生成字数
  language:''
});

// 标题数据分页, 当前页的所有数据的id
const currentTitleList = computed(() => {
  const target = state.titleList[state.current - 1];
  // // 截取开始的位置
  // const start = (state.current - 1) * 6;
  // // 截取结束的位置
  // const end = start + 6;
  return target.map((ele) => ele.id);
});

const currentTitleShowList = computed(() => {
  return state.titleList.flat();
});

// 动态表单生成
const dynamic_form = computed(() => {
  const find = state.industryList.find((item) => item.id == formState.industry);
  if (find) {
    find.params.forEach((i) => {
      if (!formState[i.label] && formState[i.label] != "") {
        formState[i.label] = "";
      }
    });
    return find.params;
  } else {
    return [];
  }
});

// 素材导入的字段
const openType = ref("");
let copyLibraryModal = ref(null); //素材库导入组件实例
// 打开文案库弹窗
const openCopyLibraryModal = (type) => {
  openType.value = type;
  copyLibraryModal.value && copyLibraryModal.value.showModal();
};
// 文案库导入回调
const CopyLibrarySuccess = (data) => {
  console.log(data, "选择的文案");

  if (data.length && data[0].material_content !== "") {
    formState[openType.value] = data[0].material_content;
    nextTick(() => {
      formRef.value.validateFields(openType.value);
    });
  }
  copyLibraryModal.value && copyLibraryModal.value.closeModal();
};

const importKeyWords = ref(null);

// 关键词导入
const importKeyWordsHandle = (type) => {
  openType.value = type;
  importKeyWords.value.showModal();
};

// 关键词导入回调
const importKeyWordsSuccess = (text) => {
  console.log(text, "选择的关键词");
  if (text && text !== "") {
    formState[openType.value] = text;
    nextTick(() => {
      formRef.value.validateFields(openType.value);
    });
  }
};

// 判断下一步按钮是否显示和时候禁用
const disabledNext = computed(() => {
  if (formState.creteTitleType == "a") {
    return {
      show: true,
      disabled: !formState.titleList.length,
    };
  } else if (formState.creteTitleType == "b") {
    return {
      show: true,
      disabled: false,
    };
  } else {
    return {
      show: false,
      disabled: true,
    };
  }
});

const formRef = ref(null);
// 行业类型改变 - 清空标题选项, 清空标题列表
const handleCaterClick = () => {
  formState.creteTitleType = "b";
  state.titleList = [];
  formState.titleList = [];
  formRef.value.clearValidate();
};

// 生成类型改变, 重置标题的数据, 重置选择的标题信息
const typeChange = () => {
  state.titleList = [];
  formState.titleList = [];
  state.current = 1;
  formState.creteTitleType = "b";
};

// 校验函数
const validateFn = async () => {
  const validFilter = dynamic_form.value
    .filter((i) => i.required)
    .map((i) => i.label);
  const validArr = [
    "script_type",
    "num",
    "shooting_script_num",
    ...validFilter,
  ];
  return await formRef.value.validateFields(validArr);
};
// 标题创建模式改变 - 自选标题或随机标题
const handlecreteTitleTypeChange = async (event) => {
  console.log(event, "handlecreteTitleTypeChange");
  if (event.target.value == "a") {
    nextTick(() => {
      if (!state.titleList.length) {
        createTitle();
      }
    });
  } else if (event.target.value == "b") {
    try {
      const values = await validateFn();
      console.log(values, "valuesvaluesvalues");
    } catch (error) {
      message.warning("请先填写必要的标题生成信息!");
      formState.creteTitleType = "b";
    }
  }
};

const getTitleTimer = ref(null);
// AI生成标题 type == again 代表是重新获取标题
const createTitle = async (type = "") => {
  // 如果已经开启了定时器, 清空定时器
  getTitleTimer.value && clearTimeout(getTitleTimer.value);
  try {
    console.log(formState, "formStateformState");
    // 最多6组数据
    if (state.titleList.flat().length >= 100) {
      return message.error("标题组数量已达上限!");
    }

    const values = await validateFn();

    console.log(values, "valuesvaluesvalues");
    state.spinning = true;
    try {
      const content = dynamic_form.value
        .map((i) => {
          return `${i.label}:${formState[i.label]}`;
        })
        .join("\n");
      // debugger
      console.log(content, "动态表单content");
      const params = {
        industry: formState.industry,
        // 语言
        language: formState.language,
        type: formState.type,
        num: formState.num, // 生成生成标题数
        shooting_script_num: formState.shooting_script_num, // 镜头组数量
        content, // 动态表单
        script_type: formState.script_type[1], // 文案风格
        is_polling: 1, // 轮询
        refresh: type == "again" ? 1 : 0, // 是否刷新
      };

      const getResult = async (data) => {
        const res = await request.get(
          "/work_ai",
          "/user/shotstack/ai/scriptTitle",
          data
        );

        if (res.result?.status == "doing") {
          getTitleTimer.value = setTimeout(() => {
            !params?.task_id && (params.task_id = res.result.task_id);
            getResult(params);
          }, 3000);
        } else {
          console.log(res.result, "ai标题结果");
          if (
            res.result.code != 0 &&
            res.result.msg != "成功" &&
            Array.isArray(res.result?.chat_data) &&
            !res.result?.chat_data.length
          ) {
            // 出意外了
            return message.error(res.result.msg);
          }
          res.result.chat_data.forEach((ele) => {
            !ele.id && (ele.id = nanoid());
          });
          // state.titleList.push(...res.result.chat_data)
          state.titleList.push([...res.result.chat_data]);
          state.spinning = false;
          nextTick(() => {
            state.current = state.titleList.length;
          });
        }
      };
      await getResult(params);
      // console.log(res, 'ai标题结果');
    } catch (error) {
      state.spinning = false;
      console.log(error, "生成标题错误");
    }
  } catch (error) {
    !state.titleList.length && (formState.creteTitleType = "b");
    message.warning("请先填写必要的标题生成信息!");
    console.log(error);
  }
};

const ImportVideogroupDataRef = ref(null);

// 获取导入组件的渲染数据状态, 判断是否可以切换选择导入
const isDisabledImportVideogroupDataRef = computed(() => {
  console.log(
    ImportVideogroupDataRef.value?.disabled,
    "ImportVideogroupDataRef.value?.disabled"
  );
  if (ImportVideogroupDataRef.value) {
    return ImportVideogroupDataRef.value?.disabled;
  }
  return true;
});

// 当导入组件正在获取音频的时候, 禁用切换步骤条
const disabledCheckStep = computed(() => {
  if (ImportVideogroupDataRef.value) {
    console.log(
      "正在导入",
      ImportVideogroupDataRef.value.spinningState.getVoiceLoding
    );
    return ImportVideogroupDataRef.value.spinningState.getVoiceLoding;
  }
  return false;
});

// 下一步提交数据, 生成视频组数据
const submit = async () => {
  console.log(formState.titleList, "选择的标题");

  if (ImportVideogroupDataRef.value.spinningState.spinning) {
    return message.warning("正在生成视频组数据，请稍后");
  }

  // return
  try {
    const values = await formRef.value.validate();
    console.log(values, "提交数据");

    
    try {
      // 查看用户的点数是否足够消耗
      await utils.aiTextGet()
      try {
        // 消耗规则
        const rule = await utils.consumptionPointRule()
        // 获取提示
        const content = utils.ruleTips({ res: rule, key: "ai_text_point" })
        // 弹出提示
        await utils.md({ content })
        // 弹窗确认消耗
      } catch (error) {
        return
      }
    } catch (error) {
      // 打开充值, 接着打开点数购买
      vipVisible.value = true
      vipModalRef.value && vipModalRef.value.openBuyVisible()
      return
    }

    // 动态表单数据
    const content = dynamic_form.value
      .map((i) => {
        return `${i.label}:${formState[i.label]}`;
      })
      .join("\n");
    // 选择的标题
    let title_data = [];

    // 用户自选标题 才有数据, 否则后端随机标题
    if (formState.creteTitleType != "b") {
      title_data = state.titleList.flat().filter((i, index) => {
        return formState.titleList.includes(i.id);
      });
    }

    console.log(title_data, "选择的标题-提交数据");
    const params = {
      industry: formState.industry,
      type: formState.type,

      num: formState.num, // 生成生成标题数
      shooting_script_num: formState.shooting_script_num, // 镜头组数量
      content, // 动态表单
      script_type: formState.script_type[1], // 文案风格
      is_polling: 1, // 轮询
      refresh: 0, // 是否刷新
      limit_type: formState.limit_type,
      title_data,
      // 语言
      language: formState.language,
    };
    ImportVideogroupDataRef.value.changeSpinning(true);
    state.step = 1;
    ImportVideogroupDataRef.value.setData({
      arr: [],
    });
    try {
      const getResult = async () => {
        const res = await request.post(
          "/work_ai",
          "/user/shotstack/ai/subtitlesScene",
          params
        );
        if (res.result?.status == "doing") {
          if (res.result.chat_data && res.result.chat_data.length) {
            ImportVideogroupDataRef.value.setData({
              arr: res.result.chat_data,
              type: formState.type,
            });
            ImportVideogroupDataRef.value.changeSpinning(false);
          }

          setTimeout(() => {
            !params?.task_id && (params.task_id = res.result.task_id);
            getResult();
          }, 3000);
        } else {
          console.log(res.result, "生成视频组数据");
          if (
            res.result.code != 0 &&
            res.result.msg != "成功" &&
            Array.isArray(res.result?.chat_data) &&
            !res.result?.chat_data.length
          ) {
            ImportVideogroupDataRef.value.changeSpinning(false);

            // 出意外了
            return message.error(res.result.msg);
          }
          // 存储数据
          ImportVideogroupDataRef.value.setData({
            arr: res.result.chat_data,
            type: formState.type,
          });
          ImportVideogroupDataRef.value.changeSpinning(false);
        }
      };
      await getResult();
    } catch (error) {
      console.log(error, "失败啦");
      ImportVideogroupDataRef.value.changeSpinning(false);
    }
  } catch (error) {
    console.log(error, "失败");
    message.error("请完善生成信息!");
  }
};

const cloneTitle = reactive({
  title: "",
  subtitle: "",
});

// 打开对应的input
const showTitle = (e, item, key) => {
  e.preventDefault();
  // 判断是主标题还是副标题
  const cloneKey = key == "showTitle" ? "title" : "subtitle";
  // 克隆赋值
  cloneTitle[cloneKey] = item[cloneKey];
  item[key] = true;
};

const titleBlur = (e, item, key) => {
  const cloneKey = key == "showTitle" ? "title" : "subtitle";
  if (!item[cloneKey].trim()) {
    message.warning("标题不能为空");
    // 重新赋值回打开前的样子
    item[cloneKey] = cloneTitle[cloneKey];
  }
  item[key] = false;
};

const visible = ref(false);

watch(
  () => visible.value,
  (nv, ov) => {
    if (!nv) {
      state.step = 0;
      const clearformState = {
        // sellingpoints: '', // 卖点
        script_type: "", // 文案风格
        num: 1, // 生成条数
        shooting_script_num: 1, // 镜头组数量
        titleList: [], // 选择的标题
        industry: "", // 选择的行业类型
        type: "", // 选择的生成模式 - 分镜头或全局文本
        creteTitleType: "", // 标题生成方式
        limit_type: "", // 生成字数
      };
      Object.keys(clearformState).forEach((key) => {
        formState[key] = clearformState[key];
      });
      // 置空已有值的数据
      state.industryList.forEach((ele) => {
        ele.params.forEach((i) => {
          formState[i.label] = "";
        });
      });
      ImportVideogroupDataRef.value.clearData();
      state.titleList = [];
      state.current = 1;
    }
  }
);

// 获取下拉框数据
const getIndustry = () => {
  request.get("/work_ai", "/user/shotstack/ai/industry").then((res) => {
    console.log(res, "行业信息i");
    state.industryList = res.result.industryList;
    state.splitShotTextList = res.result.splitShotTextList;
    // 行业初始赋值
    const find = res.result.industryList.find((ele) => ele.name == "通用");
    formState.industry = find?.id || res.result.industryList[0].id;
    // 生成类型初始赋值
    if (props.isQuanJU) {
      formState.type = res.result.splitShotTextList.find(
        (ele) => ele.label == "全局文本"
      ).key;
      return;
    }
    formState.type = res.result.splitShotTextList[0].key;
  });
};

// 获取文案风格数据
const getTextStyleList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/scriptType");
  console.log(res, "文案风格数据");
  state.options = res.result;
};
// 获取字数选择列表
const getLimit_typeList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/wordLimit");
  console.log(res, "ai文案字数");
  state.limit_typeList = res.result;
  // word_limit_50_75
  const find = res.result.find((ele) => ele.value == "word_limit_75_150");
  formState.limit_type = !!find ? find.value : res.result[0].value;
};


// 获取语言选择列表
const getLanguagesList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/languages");
  console.log(res, "文案语言");
  state.languagesList = res.result;
  // word_limit_50_75
  const find = state.languagesList.find((ele) => ele.label == "中文");
  formState.language = !!find ? find.value : res.result[0].value;
};

// 修改step 完成阶段的展示内容
const updateStepThree = (data) => {
  Object.assign(state.stepThree, data);
};

//  提交导入数据
const updateAiData = (data) => {
  console.log(data, "导入数据回调中间步骤");
  emit("updateAiData", data);
};

// 暴露用户选择的数据
const emitArr = (arr) => {
  emit("emitArr", arr);
};

// 关闭抽屉
const closeDrawer = () => {
  if (ImportVideogroupDataRef.value.spinningState.getVoiceLoding) {
    return message.warning("正在获取音频中, 请稍后...");
  }
  visible.value = false;
};

// 携带了初始赋值
const showDrawer = (data = null) => {
  if (!!data) {
    state.initData = data;
  }
  formState.creteTitleType = "b";
  getIndustry();
  getTextStyleList();
  getLimit_typeList();
  getLanguagesList()
  visible.value = true;
};

/**
 *     emit('updateStepThree', {
        title: '数据导入中...',
        btn_text: '数据正在导入中...',
        loading: true
    })
 */
defineExpose({
  showDrawer,
  closeDrawer,
  updateStepThree,
});
</script>

<template>
  <a-drawer
    style="z-index: 999 !important"
    :closable="false"
    :keyboard="false"
    :maskClosable="false"
    v-model:visible="visible"
    :width="750"
    destroyOnClose
    placement="right"
    :bodyStyle="{
      paddingTop: 0,
    }"
  >
    <slot name="title">
      <div class="title_box">
        <div class="title_top">
          <h1 class="title">AI写作助手</h1>
          <div class="close" @click="closeDrawer">
            <CloseOutlined />
          </div>
        </div>
      </div>
    </slot>

    <div class="steps">
      <a-steps
        size="small"
        v-model:current="state.step"
        :disabled="disabledCheckStep"
      >
        <a-step title="基础配置" :disabled="disabledCheckStep" />
        <a-step
          title="选择导入"
          :disabled="isDisabledImportVideogroupDataRef || disabledCheckStep"
        />
        <a-step title="完成" :disabled="true" />
      </a-steps>
    </div>

    <div v-show="state.step == 0" class="AIWritingAssistant">
      <a-form
        :model="formState"
        name="basic"
        ref="formRef"
        :labelWrap="false"
        layout="vertical"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <div class="split_title_box">
          <h2 class="title_text">基础配置</h2>
        </div>

        <div class="form_item">
          <a-form-item
            label="行业类型"
            name="industry"
            :rules="[{ required: true, message: '请选择行业类型' }]"
            style="width: 50%"
          >
            <a-select
              placeholder="请选择行业类型"
              v-model:value="formState.industry"
              @change="handleCaterClick"
            >
              <a-select-option
                v-for="option in state.industryList"
                :key="option.id"
                :value="option.id"
              >
                {{ option.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- :disabled="option.key == 0 && props.isQuanJU" -->
          <a-form-item
            label="生成类型"
            name="type"
            :rules="[{ required: true, message: '请选择生成类型' }]"
            style="width: 50%"
          >
            <a-select
              placeholder="请选择生成类型"
              :disabled="props.isQuanJU || props.isScript"
              v-model:value="formState.type"
              @change="typeChange"
            >
              <a-select-option
                :disabled="option.key == 0 && props.isQuanJU"
                v-for="option in state.splitShotTextList"
                :key="option.key"
                :value="option.key"
              >
                {{ option.label }}
                <br />
                <span
                  style="
                    font-size: 11.5px !important;
                    color: #737a87;
                    overflow-wrap: break-word !important;
                  "
                >
                  {{ option.desc }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <!-- 动态表单项 -->
        <div class="dynamic_form">
          <a-form-item
            class="form_item"
            v-for="i in dynamic_form"
            :label="i.label"
            :name="i.label"
            :key="i.id"
            :rules="[{ required: i.required, message: `请填写${i.label}` }]"
          >
            <a-input
              v-if="i.formtype == 'input'"
              v-model:value="formState[i.label]"
              allowClear
              showCount
              :maxlength="i.max_length"
              :placeholder="i.placeholder || ''"
              class="input"
            >
            </a-input>
            <a-textarea
              v-if="i.formtype == 'textarea'"
              :autosize="{ minRows: 4, maxRows: 6 }"
              v-model:value="formState[i.label]"
              allowClear
              showCount
              :maxlength="i.max_length"
              :placeholder="i.placeholder || ''"
              class="input"
            >
            </a-textarea>
            <div class="btn_box">
              <a-button
                class="btn"
                style="padding: 0 !important; font-size: 12px"
                v-show="i.use_ai_keyword == 1"
                type="link"
                size="small"
                @click.stop="importKeyWordsHandle(i.label)"
              >
                关键词导入
              </a-button>
              <a-button
                class="btn"
                style="padding: 0 !important; font-size: 12px"
                type="link"
                size="small"
                @click.stop="openCopyLibraryModal(i.label)"
              >
                文案导入
              </a-button>
            </div>
          </a-form-item>
        </div>

        <div class="split_title_box">
          <h2 class="title_text">生成设置</h2>
        </div>

        <!-- <div class="form_item"> -->
          <div class="form_item">
                  <!-- 文案风格  -->
        <a-form-item style="width: 50%" label="文案风格" name="script_type" :rules="[{ required: true, message: '请选择文案风格' }]">
          <a-cascader style="width: 100%"  expand-trigger="hover" :fieldNames="{
              label: 'name',
              value: 'type',
              children: 'list',
            }" v-model:value="formState.script_type" :options="state.options" placeholder="请选择文案风格" />
        </a-form-item>

        <a-form-item style="width: 50%" label="语言" name="language">
          <a-select v-model:value="formState.language" style="width: 100%"
            :options="state.languagesList"></a-select>
        </a-form-item>
        </div>

        <div class="form_item">
          <a-form-item
            style="width: 50%"
            label="生成标题数"
            name="num"
            :rules="[{ required: true, message: '请选择文案条数' }]"
          >
            <a-select
              v-model:value="formState.num"
              :size="size"
              style="width: 100%"
              :options="state.copyCount"
            ></a-select>
          </a-form-item>

          <a-form-item
            v-show="formState.type == 0"
            style="width: 50%"
            label="镜头组数"
            name="shooting_script_num"
            :rules="[{ required: true, message: '请选择镜头组数量' }]"
          >
            <a-select
              v-model:value="formState.shooting_script_num"
              :size="size"
              style="width: 100%"
              :options="state.templateOptions"
            ></a-select>
          </a-form-item>
        </div>

        <!-- <a-button type="primary" class="get_title_btn" @click="createTitle">
          <SendOutlined />
          生成标题
        </a-button> -->

        <div class="split_title_box">
          <h2 class="title_text">标题生成</h2>
        </div>

        <!-- 自选标题或随机生成标题 -->
        <a-form-item
          style="width: 50%"
          label="标题生成方式"
          name="creteTitleType"
          :rules="[{ required: true, message: '请选择标题生成方式' }]"
        >
          <a-radio-group
            v-model:value="formState.creteTitleType"
            @change="handlecreteTitleTypeChange"
          >
            <a-radio-button value="a">自选标题</a-radio-button>
            <a-radio-button value="b">随机标题</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <!-- v-if="formState.creteTitleType == 'a'" -->

        <a-form-item
          label="AI为您生成标题"
          v-if="formState.creteTitleType == 'a'"
          name="titleList"
          :rules="[{ required: true, message: '请选择标题' }]"
        >
          <a-checkbox-group
            v-model:value="formState.titleList"
            style="width: 100%"
          >
            <div class="select_content">
              <template v-if="state.spinning">
                <a-spin
                  :spinning="state.spinning"
                  tip="正在为您生成标题，请稍后"
                />
              </template>
              <template v-else>
                <a-checkbox
                  :disabled="
                    !formState.titleList.includes(i.id) &&
                    formState.titleList.length >= templateListLength
                  "
                  :value="i.id"
                  v-for="i in currentTitleShowList"
                  :key="i.id"
                  v-show="currentTitleList.includes(i.id)"
                >
                  <div class="title_min">
                    <a-input
                      v-autoFocus="i.showTitle"
                      @blur="titleBlur($event, i, 'showTitle')"
                      style="width: 100%"
                      v-model:value="i.title"
                      v-if="i.showTitle"
                      placeholder="请输入标题"
                    />
                    <span v-else @click.stop="showTitle($event, i, 'showTitle')"
                      >主标题：{{ i.title }}</span
                    >
                  </div>
                  <div class="subtitle">
                    <a-input
                      v-autoFocus="i.showSubtitle"
                      style="width: 100%"
                      @blur="titleBlur($event, i, 'showSubtitle')"
                      v-if="i.showSubtitle"
                      v-model:value="i.subtitle"
                      placeholder="请输入副标题"
                    />
                    <span
                      v-else
                      @click.stop="showTitle($event, i, 'showSubtitle')"
                      >副标题：{{ i.subtitle }}</span
                    >
                  </div>
                </a-checkbox>

                <div class="bottom_control">
                  <!-- mini分页器 -->
                  <a-pagination
                    size="small"
                    v-model:current="state.current"
                    :defaultPageSize="1"
                    :total="state.titleList.length"
                  />

                  <a-button
                    :loading="state.spinning"
                    type="link"
                    style="width: 80px; padding: 0"
                    @click="createTitle('again')"
                  >
                    <RedoOutlined />
                    换一换
                  </a-button>
                </div>
              </template>
            </div>
          </a-checkbox-group>
        </a-form-item>

        <!-- 生成字数 -->
        <a-form-item
          style="width: 100%"
          v-if="formState.creteTitleType"
          label="文案字数"
          name="limit_type"
        >
          <a-select
            v-model:value="formState.limit_type"
            :size="size"
            style="width: 100%"
            :options="state.limit_typeList"
          ></a-select>
        </a-form-item>
      </a-form>

      <!-- v-show="disabledNext.show" :disabled="disabledNext.disabled" -->
      <a-button
        v-show="disabledNext.show"
        type="primary"
        @click="submit"
        style="width: 100%"
      >
        下一步
      </a-button>
    </div>

    <div v-show="state.step == 1">
      <ImportVideogroupData
        @updateStep="(step) => (state.step = step)"
        :type="formState.type"
        :isQuanJU="props.isQuanJU"
        :initData="state.initData"
        :isScript="props.isScript"
        @updateAiData="updateAiData"
        @emitArr="emitArr"
        @updateStepThree="updateStepThree"
        ref="ImportVideogroupDataRef"
      >
      </ImportVideogroupData>
    </div>
    <!-- :spinning="state.stepThree.loading" -->
    <!-- <a-spin size="small" :spinning="state.stepThree.loading" /> -->
    <div v-show="state.step == 2" class="importOk">
      <h2>{{ state.stepThree.title }}</h2>
      <div class="btn_group">
        <a-button
          :loading="state.stepThree.loading"
          type="primary"
          @click="visible = false"
          >{{ state.stepThree.btn_text }}</a-button
        >

        <!-- v-if="state.stepThree.title == '数据导入失败!'" -->
        <a-button
          v-if="state.stepThree.title == '数据导入失败!'"
          type="primary"
          @click="state.step = 1"
          >返回上一步重试</a-button
        >
      </div>
    </div>
  </a-drawer>

  <!-- 关键词导入 -->
  <ImportKeyWords ref="importKeyWords" @success="importKeyWordsSuccess" />
  <!-- // 文案库 -->
  <CopyLibraryModal
    :isComponents="true"
    :selectType="radio"
    ref="copyLibraryModal"
    @importSuccess="CopyLibrarySuccess"
  />
    <!-- 充值弹窗 -->
    <vipModal ref="vipModalRef" :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>

<style lang="less" scoped>
// 头部样式
.title_box {
  width: 100%;
  padding-bottom: 10px;
  padding-top: 24px;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;

  &::after {
    content: "";
    height: 1px;
    width: calc(100% + 48px);
    background-color: #e8e8e8;
    position: absolute;
    bottom: 0;
    left: -24px;
  }

  .title_top {
    display: flex;
    justify-content: space-between;
    color: #0c0d0e;

    // margin-bottom: 10px;
    h1 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .close {
      cursor: pointer;
      text-align: center;
      line-height: 29px;
      padding: 0 6px;

      &:hover {
        background-color: #f3f3f4;
      }
    }
  }

  .title_bottom {
    .btn_prev {
      border-radius: 5px;
      padding: 0 16px;
      font-size: 12px;
      height: 28px;
    }
  }
}

// 步骤条样式
.steps {
  margin: 20px 0;

  :deep(.ss-steps-item-container) {
    display: flex;

    .ss-steps-item-icon {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

// 分割的小标题
.split_title_box {
  margin: 20px 0;

  .title_text {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
  }
}

// 导入完成
.importOk {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  h2 {
    font-size: 20px;
    font-weight: 900;
  }

  .btn_group {
    display: flex;
    gap: 10px;
  }
}

.AIWritingAssistant {
  :deep(.ss-checkbox-wrapper) {
    :nth-child(2) {
      flex: 1;
    }

    // span {
    // }
  }

  // input 文案导入布局
  .input {
    padding-right: 0;
    position: relative;

    :deep(.ss-input-prefix) {
      opacity: 0;
      transition: all 0.3s;
      // border-left: 1px solid #ccc;
      position: absolute;
      right: -15px;
      top: -23px;

      span {
        font-size: 12px;
      }

      // .btn_box {
      //   display: flex;
      //   align-items: center;
      //   gap: 8px;
      //   padding-right: 10px;

      //   .btn {
      //     padding: 0;
      //   }
      // }
    }

    &:hover {
      :deep(.ss-input-prefix) {
        opacity: 1;
      }
    }
  }

  // textarea 文案导入布局
  .textarea_box {
    position: relative;

    .btn {
      opacity: 0;
      transition: all 0.3s;
      position: absolute;
      right: 35px;
      top: -23px;
      width: 20px;
      font-size: 12px;
    }

    &:hover {
      .btn {
        opacity: 1;
      }
    }
  }

  // 标题列表
  .select_content {
    display: flex;
    flex-direction: column;

    .title_min {
      font-size: 14px;
      font-weight: 900;
      width: 100%;
    }

    .subtitle {
      font-size: 14px;
      width: 100%;
      margin-bottom: 8px;
    }

    :deep(.ss-checkbox-wrapper) {
      margin: 0;
    }

    .bottom_control {
      display: flex;
      // justify-content: space-between;
      gap: 20px;
      align-items: center;
      margin-top: 10px;
    }
  }

  .get_title_btn {
    margin-bottom: 20px;
  }

  .dynamic_form {
    // display: grid;
    // grid-template-columns: 1fr 1fr;
    // gap: 0px 20px;
    .form_item {
      position: relative;
      .btn_box {
        position: absolute;
        top: -30px;
        right: 0;
        display: flex;
        align-items: center;
        gap: 3px;
        opacity: 0;
        transition: all 0.3s;
        .btn {
          padding: 3px;
        }
      }
      &:hover {
        .btn_box {
          opacity: 1;
        }
      }
    }
  }

  .form_item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
}
</style>
